<template>
  <div id="GoodPrice">
   
    <el-row style="margin-top: 1%" :gutter="20">
   <el-col :span="16" style="position: absolute; top: -30px; left: 10px;width:100%">
  <el-input
    placeholder="请输入商品编号/名称/条码/供应商/品牌查询"
    v-model="searchQuery"
    style="width: 300px;"
  ></el-input>
  
  <el-select
    v-model="selectedStatus"
    placeholder="状态"
    style="width: 100px; margin-left: 10px;"
  >
    <el-option
      v-for="item in statusOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>

  <el-select
    v-model="selectedProduct"
    placeholder="商品"
    style="width: 150px; margin-left: 10px;"
  >
    <el-option
      v-for="item in productOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>

  <el-checkbox
    v-model="showBasicUnitPrice"
    style="margin-left: 10px;"
  >只显示基本单位价</el-checkbox>

  <el-checkbox
    v-model="showLastPrice"
    style="margin-left: 10px;"
  >显示最近价</el-checkbox>

  <el-checkbox
    v-model="showZeroInventory"
    style="margin-left: 10px;"
  >显示零库存商品</el-checkbox>

  <el-button type="primary" @click="search" style="margin-left: 10px;">查询</el-button>
</el-col>
      <!-- 右侧按钮组 -->
      <el-button-group style="position: absolute; top: 40px; right: 10px;">
        <el-button type="primary">快捷改价</el-button>
        <el-button type="primary">批量改价</el-button>
        <el-button type="primary">批量清空价格</el-button>
        <el-button type="primary">导出</el-button>
        <el-button type="primary">商品变价设置</el-button>
      </el-button-group>

      <!-- 左侧 商品类别树状结构 -->
      <el-col :span="span" :class="[span != '4' ? 'span1' : 'span1']" style="position: absolute;height: 500px;top:100px">
        <div style="position: relative; width: 50%; height: 100%">
          <el-drawer
            class="drawerClass"
            style="position: absolute"
            :append-to-body="false"
            :modal="false"
            :show-close="false"
            :wrapperClosable="false"
            size="100%"
            :visible.sync="drawer"
            direction="ltr"
          >
            <el-card class="box-card" style="position: relative; height: 100%;">
              <el-tree
                :data="categoryData"
                node-key="id"
                :props="defaultProps"
                style="height: 100%; overflow: auto;"
              ></el-tree>
            </el-card>
          </el-drawer>
           <div
            style="
              position: absolute;
              z-index: 999999999;
              cursor: pointer;
              top: 30%;
              right: 10px;
            "
            :class="[drawer ? 'toggle-text' : 'toggle-text']"
            @click="clickImg"
          >
            <span v-show="!drawer">></span>
            <span v-show="drawer"><</span>
          </div>
        </div>
      </el-col>
      <!-- 右侧 商品列表 -->
      <el-col :span="span1" :class="[span1 != '15' ? 'span1' : 'span1']" style="position: absolute;height: 500px;top:100px;left:250px">
    <el-card class="box-card" style="height: 100%; position:absolute; ">
      <el-table :data="productList" style="height: calc(100% - 100px); width:1200px" >
        <!-- 商品字段列定义 -->
        <el-table-column prop="productCode" label="商品编号" width="180" :fixed="'left'"></el-table-column>
        <el-table-column prop="productName" label="商品名称" width="180" :fixed="'left'"></el-table-column>
        <el-table-column prop="unit" label="单位" width="100"></el-table-column>
        <el-table-column prop="purchasePrice" label="预计采购价" width="180"></el-table-column>
        <el-table-column prop="lastPurchasePrice" label="最近采购价" width="180"></el-table-column>
        <el-table-column prop="lastSalePrice" label="最近售价" width="180"></el-table-column>
        <el-table-column prop="minSalePrice" label="最低销售价" width="180"></el-table-column>
        <el-table-column prop="priceStrategy" label="自动变价方案" width="180"></el-table-column>
        <el-table-column prop="attributes" label="辅助属性" width="180"></el-table-column>
        <el-table-column prop="retailPrice" label="零售价" width="180"></el-table-column>
        <el-table-column prop="vipPrice" label="VIP会员价" width="180"></el-table-column>
      </el-table>
      <!-- 分页组件 -->
   <el-pagination  style="position: relative;left: 500px;top: 280px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100">
          </el-pagination>
    </el-card>
  </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name:'GoodPrice',
  data() {
    return {
      span: 8,
      span1: 15,
      drawer: true,
      categoryData: [], // 商品类别数据
      productList: [],
      totalProducts: 0, // 总商品数
      pageSize: 10, // 每页显示的商品数
      currentPage: 1, // 商品列表数据
      defaultProps: {
        children: 'children',
        label: 'label'
      }
      // 其他数据属性...
    };
  },
  methods: {
    clickImg() {
      this.drawer = !this.drawer;
      if (this.drawer) {
        this.span = 8;
        this.span1 = 15;
      } else {
        this.span = 1;
        this.span1 = 23;
      }
    }
    // CRUD 方法...
  }
};
</script>

<style>
.toggle-text {
  font-size: 16px;
  color: #409eff;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}
.title {
  font-size: 24px; /* 根据需要调整大小 */
  font-weight: bold;
  margin-bottom: 20px; /* 添加一些底部边距 */
  position:absolute;
  top: 80px;
  left: 400px;
}
.toggle-text {
  font-size: 16px;
  color: #409eff;
}
</style>